<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <!-- 搜索区域 -->
      <a-form layout="inline" @keyup.enter.native="getList">
        <a-row :gutter="24">
          <a-col :md="6" :sm="6">
            <a-form-item label="提现账号" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
              <a-input placeholder="请输入提现账号" v-model="queryParam.realname"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="6">
            <a-button type="primary" @click="getList">查询</a-button>
            <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <section class="table">
      <a-table ref="table" size="middle" bordered rowKey="objectSid" :columns="columns" :pagination="ipagination"
        :dataSource="agentList" @change="changePage" :loading="loading">
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="text" height="60px" alt="" style="max-width:100px;font-size: 12px;font-style: italic;" />
        </template>
        <span slot="isRest" slot-scope="text, record">
          <a-popconfirm :title="`确定${record.status==0?'启用':'隐藏'}活动吗?`" @confirm="() => onChangeStatus(record)">
            <a-switch checked-children="启用" un-checked-children="隐藏" :checked="record.status == 1 ? true : false" />
          </a-popconfirm>
        </span>
        <span slot="action" slot-scope="record">
          <a v-if="record.status==2" @click="toShowDetails(record)">审核</a>
          <a  v-if="record.status!=2" @click="toShowDetails(record)" >详情</a>
        </span>
      </a-table>
    </section>
    <!-- 新建弹窗 -->
    <a-modal :title="titleText" :visible="showAdd" :footer="false" width="40%" :closable="true" @cancel="onClose">
      <section class="add-box">
        <a-form-model :label-col="labelCol" :model="newAgent" ref="addForm" :wrapper-col="wrapperCol">
          <a-form-model-item label="提现金额">
            <label>{{newAgent.rakeAmount}}</label>
          </a-form-model-item>
          <a-form-model-item label="提现账号">
            <label>{{newAgent.zfbAccount}}</label>
          </a-form-model-item>
          <a-form-model-item label="提现姓名">
            <label>{{newAgent.zfbName}}</label>
          </a-form-model-item>
          <a-form-model-item label="提现状态">
            <label v-if="newAgent.status==2">审核中</label>
            <label v-if="newAgent.status==3">审核通过</label>
            <label v-if="newAgent.status==4">已驳回</label>
          </a-form-model-item>
          <a-form-model-item label="提现时间">
            {{newAgent.createTime}}
          </a-form-model-item>
        </a-form-model>
        <section class="btn-group" v-if="newAgent.status==2">
          <a-button type="primary" :loading="saveLoading" @click="saveThis(3)">通过</a-button>
          <a-button type="primary" :loading="refuseLoading" @click="saveThis(4)">驳回</a-button>
        </section>
      </section>
    </a-modal>
  </a-card>
</template>

<script>
  import {
    ACCESS_TOKEN
  } from "@/store/mutation-types"
  import Vue from 'vue'
  import {
    postAction,
    getAction
  } from '@/api/manage'
  export default {
    name: 'AgentsList',
    data() {
      return {
        saveLoading: false,
        addloading: false,
        refuseLoading: false,
        detailsloading: false,
        editloading: false,
        isNew: false,
        boxTitle: '',
        statusList: [{
            name: '启用',
            id: '1'
          },
          {
            name: '未启用',
            id: '0'
          }
        ],
        titleText:"",
        queryParam: {
          pageNo: 1,
          pageSize: 10
        },
        showChange: false,
        agentDetails: '',
        showDetails: false,
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 6
          },
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 16
          },
        },
        showAdd: false,
        agentList: [],
        newAgent: {},
        selectedRowKeysArrey: [],
        columns: [{
            title: '提现金额',
            align: "center",
            dataIndex: 'rakeAmount'
          },
          {
            title: '提现账号',
            align: "center",
            dataIndex: 'zfbAccount'
          },
          {
            title: '提现姓名',
            align: "center",
            dataIndex: 'zfbName'
          }, {
            title: '提现状态',
            align: "center",
            dataIndex: 'status',
            customRender: (value, row, index) => {
              let obj
              if (value == 2) {
                obj = '审核中';
              } else if (value == 3) {
                obj = '审核通过';
              } else if (value == 4) {
                obj = '已驳回';
              }
              return obj;
            }
          },
          {
            title: '提现时间',
            align: "center",
            dataIndex: 'createTime'
          }, {
            title: '操作',
            dataIndex: '',
            key: 'x',
            scopedSlots: {
              customRender: 'action'
            }
          }
        ],
        ipagination: {
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        loading: false,
        chooseAgent: '',
        headers: {},
        url: {
          list: "/adminWithDraw/queryWithDrawHis",
          edit: '/adminWithDraw/updateStatus'
        },
      }
    },
    created() {
      const token = Vue.ls.get(ACCESS_TOKEN);
      this.headers = {
        "X-Access-Token": token
      }
      this.getList();
    },
    methods: {
      // 代理列表改变分页
      changePage(pagination) {
        this.queryParam.pageNo = pagination.current;
        this.queryParam.pageSize = pagination.pageSize;
        this.getList();
      },
      // 获取列表
      getList() {
        this.loading = true;
        getAction(this.url.list).then(res => {
          console.log(res);
          this.loading = false;
          if (res.success) {
            this.agentList = res.result.records;
            this.ipagination.total = res.result.total;
            this.selectedRowKeysArrey = [];
            this.chooseAgent = '';
          }
        }).finally(() => {
          this.loading = false
        })
      },
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      onClose() {
        this.showAdd = false;
        this.showDetails = false;
        this.showAllot = false;
        this.showLogin = false;
      },
      // 关闭抽屉
      afterVisibleChange() {
        // this.selectedRowKeysArrey = [];
        // this.newPassword = {};
        // this.queryParam = {
        //   createStartTime: '',
        //   createEndTime: '',
        //   agentName: '',
        //   degree: '',
        //   realname: '',
        //   phone: '',
        //   signingMethod: '',
        //   pageNo: this.queryParam.pageNo,
        //   pageSize: this.queryParam.pageSize
        // }
        // // showAdd = true 表示打开新增代理对象框，此时刷新列表
        // this.getList();
      },
      toShowDetails(e) {
        this.newAgent = e;
        if(this.newAgent.status==2){
          this.titleText='审核';
        }else{
          this.titleText='详情';
        }
        this.showAdd = true;
      },
      searchReset() {
        this.queryParam = {
          pageNo: 1,
          pageSize: 10
        }
      },
      // 保存活动
      saveThis(e) {
        console.log(this.newAgent);
        if (e == 3) {
          this.saveLoading = true;
        } else {
          this.refuseLoading = true;
        }
        postAction(this.url.edit,{
            objectSid:this.newAgent.objectSid,
            status:e
        }).then(res => {
          console.log(res);
          this.saveLoading = false;
          this.refuseLoading = false;
          if (res.success) {
            this.$message.success(res.message);
            this.showAdd = false;
            this.getList();
          } else {
            this.$message.error(res.message)
          }
        })
      }
    }
  }
</script>
<style scoped>
  .button-group button {
    margin-right: 10px;
  }

  .time-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .table {
    margin-top: 20px;
  }

  .time-box span {
    min-width: 0 !important;
  }

  .btn-group {
    display: flex;
    justify-content: center;
  }

  .btn-group button {
    margin-right: 10px;
  }
</style>